<template>
  <div class="count-list-wrapper">
    <template v-for="(item, index) in countList">
      <Component :color="colors[index % colors.length]" :is="item"/>
    </template>
  </div>
</template>
<script setup>
import {computed, useSlots} from 'vue';
import {isEmpty} from '@/utils/CommonUtils';

const colors = ['#00a0f0', '#53c4f8', '#00d6a4', '#00a0f0',
  '#ff9e22', '#00c1f7', '#37aaf3', '#ea46b2'];
defineOptions({
  name: 'CommonCountListWrapper'
});
const slots = useSlots();

const countList = computed(() => {
  let list = slots.default();
  if (isEmpty(list)) return [];
  return list;
});

</script>
<script>
export default {
  name: 'CommonCountListWrapper'
}
</script>
<style>
.count-list-wrapper {
  width: 100%;
  display: flex;
}
</style>
